<template>
  <!--    单位弹窗  unitDialogShow  -->
  <div @mouseup="moveEnd" class="dialog_box unit_dialog_box boxSize"
    :style="(cmx != 0 && cmx != 0) && ({ 'left': cmx + 'px', 'top': cmy + 'px' })" style="z-index: 1000">
    <div @mouseup="moveEnd" @mousedown="moveStart" class="hide-focus"></div>
    <div class="close" @click="unitDialogShowChange()"></div>
    <div class="title">总长度：</div>
    <div class="list flex boxSize">
      <div class="num"></div>
      <div class="input_box boxSize full flex" style="color: #00E6FF">
        {{
          measureData1
        }}m
        <input type="text">
        <!--        <div class="del"></div>-->
      </div>
    </div>
    <div class="title">面积：</div>
    <div class="list flex boxSize">
      <div class="num"></div>
      <div class="input_box boxSize full flex" style="color:  #00E6FF">
        {{
          measureData2
        }}m²
        <input type="text">
        <!--        <div class="del"></div>-->
      </div>
    </div>
    <div class="title">体积：</div>
    <div class="list flex boxSize">
      <div class="num"></div>
      <div class="input_box boxSize full flex" style="color: #00E6FF">
        {{ measureData3 }}m³
        <input type="text">
        <!--        <div class="del"></div>-->
      </div>
    </div>
    <div class="title">地表距离：</div>
    <div class="list flex boxSize">
      <div class="num"></div>
      <div class="input_box boxSize full flex" style="color: #00E6FF">
        {{ measureData4 }}km
        <input type="text">
        <!--        <div class="del"></div>-->
      </div>
    </div>
    <div class="title">地表面积：</div>
    <div class="list flex boxSize">
      <div class="num"></div>
      <div class="input_box boxSize full flex" style="color: #00E6FF">
        {{ measureData5 }}km²
        <input type="text">
        <!--        <div class="del"></div>-->
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  name: "caltool",
  data() {
    return {
      cmx: 0,
      cmy: 0,
      monseIsStart: false,
      measureData1: 0,//测绘结果
      measureData2: 0,//测绘结果
      measureData3: 0,//测绘结果
      measureData4: 0,//测绘结果
      measureData5: 0,//测绘结果
    }
  },
  props: {
    mx: Number,
    my: Number,
  },
  watch: {
    mx(nV, oV) {
      if (this.monseIsStart) {
        this.cmx = this.dealData.cloneDeep(nV)
      }

    },
    my(nV, oV) {
      if (this.monseIsStart) {
        this.cmy = this.dealData.cloneDeep(nV)
      }

    }
  },
  mounted() {
    window.addResponseEventListener("printMessage", data => {
      console.log("接收到消息", data)
      if (data.includes("PlayVideo")) {
         console.log("接收到消息 return")
        return
      }
      data = eval('[{' + data + '}]');
      this.getUe4Data(data)
    })
  },
  methods: {
    ...mapActions({
      setInfo: 'latlon/setInfo',
    }),
    getUe4Data(data) {
      console.log('asdasdasd', data)
      if (data[0].gq != null || data[0].gd != null || data[0].yy != null || data[0].kk != null || data[0].pw != null) {//监控
        this.$emit('showMonitor', true)
        return
      }
      if (data[0].spatial || data[0].spatial == '') {//公司信息
        this.$emit('showSpatial', data[0].spatial)
        return
      }
      if (data[0].areaDevicePos) {//绘制区域信息
        this.setInfo(data[0].areaDevicePos)
        return
      }
      if (data[0].roamPoi) {//漫游绘制消息
        console.log('漫游绘制消息漫游绘制消息漫游绘制消息')
        this.$event.emit('msg::roam');
        return
      }
      if (data[0].markpoint) {//标点信息
        console.log('标点信息标点信息标点信息标点信息', data[0].markpoint)
        this.$event.emit('msg::markPoint', data[0].markpoint.split(':').pop());
        return
      }
    
      if (data[0].ClickPoint) {//标点信息
        console.log("接收到消息", data)
        this.$event.emit('draw::mark'); //打开标点页面
        console.log('标点信息标点信息标点信息标点信息', data[0].ClickPoint)
        this.$event.emit('msg::clickPoint', data[0].ClickPoint.split(':').pop());
        return
      }
      if (data[0].lengthMeasure) {//测距结果
        this.measureData1 = this.dealData.round(data[0].lengthMeasure / 100, 2)
      }
      if (data[0].areaMeasure) {//面积结果
        this.measureData2 = this.dealData.round(data[0].areaMeasure, 2)
      }
      if (data[0].aearthLength) {//面积结果
        this.measureData4 = this.dealData.round(data[0].aearthLength / (100 * 1000), 2)
      }
      if (data[0].aearthArea) {//面积结果
        this.measureData5 = this.dealData.round(data[0].aearthArea / (1000 * 1000), 2)
      }
      if (this.measureData1 && this.measureData2) {
        this.measureData3 = this.dealData.round(this.measureData1 * this.measureData2, 2)
      }
    },
    moveEnd() {
      this.monseIsStart = false
    },
    moveStart() {
      this.monseIsStart = true
    },
    unitDialogShowChange() {
      this.$emit('caltoolClickImp', false)
      var descriptor = ''
      descriptor = { 'lengthMeasure': 0 }
      window.emitUIInteraction(descriptor);
      var descriptor1 = ''
      descriptor1 = { 'areaMeasure': 0 }
      window.emitUIInteraction(descriptor1);
      var descriptor2 = ''
      descriptor2 = { 'earthLength': 0 }
      window.emitUIInteraction(descriptor2);
      var descriptor3 = ''
      descriptor3 = { 'earthArea': 0 }
      window.emitUIInteraction(descriptor3);
    }
    ,
  }
}
</script>

<style lang="scss" scoped>
.unit_dialog_box {
  position: fixed;
  left: 1400px;
  top: 80px;
  padding: 4px 8px;
  width: 200px;
  height: 274px;
  background-size: 100% 100%;
  background-image: url("@/assets/monitor/air/chart_bg_16.png");

  .hide-focus {
    position: absolute;
    width: 100px;
    height: 20px;
    left: 0;
    top: 2px;
    z-index: 9;
  }

  .hide-focus:hover {
    cursor: move;
  }

  .close {
    z-index: 1000;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 12px;
    height: 12px;
    background-size: 100% 100%;
    background-image: url("@/assets/monitor/air/del_1.png");
    cursor: pointer;
  }

  .title {
    margin-top: 20px;
    height: 18px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
  }

  .list {
    margin-top: -10px;
    height: 18px;
    align-items: center;
    justify-content: start;

    .num {
      height: 18px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }

    .input_box {
      flex: 94px;
      height: 18px;
      background: rgba(8, 32, 72, 0.7);

      input {
        width: 75px;
        height: 100%;
        border: none;
        outline: none;
        background-color: transparent;
      }

      .del {
        margin-right: 3px;
        width: 13px;
        height: 13px;
        background-size: 100% 100%;
        background-image: url("@/assets/monitor/air/del_3.png");
        cursor: pointer;
      }
    }
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;

  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }

  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }

  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }

  .unit_dialog_box {
    left: calHeight_2k(1300px);
    top: calHeight_2k(80px);
  }
}
</style>